<template>
  <!-- <inject-template :item="item" :pageId="pageId" :popId="popId" :isHiddenComp="isHiddenComp">
    <template v-slot:common> -->
      <div v-if="commonAttr.listType == LIST_TYPE_MAP.commonList" class="group-carousel" :style="styles">
        <div v-for="(carouselItem, index) in carouselList" :key="carouselItem.id" class="flex-con" :style="scrollItemStyle" :active="index === relateCompItemIndex">
          <group-component :item="carouselItem" :pageId="pageId" :popId="popId"></group-component>
        </div>
      </div>
      <div v-else-if="commonAttr.listType == LIST_TYPE_MAP.relative" class="group-carousel-relative" :id="item.id">
        <template v-for="(carouselItem, index) in carouselList" :key="carouselItem.id" :active="index === relateCompItemIndex">
          <group-component :item="carouselItem" :pageId="pageId" :popId="popId"></group-component>
        </template>
      </div>
      <div v-else-if="commonAttr.listType == LIST_TYPE_MAP.rotate" class="group-carousel" :style="styles" :class="getRotateConClass">
        <group-component :item="item" :pageId="pageId" :popId="popId" :class="getRotateClass">></group-component>
      </div>
      <div v-else-if="commonAttr.listType == LIST_TYPE_MAP.scroll" class="group-carousel" :style="styles" ref="swiper">
        <div class="swiper swiper-container vertical-scroll" ref="scrollSwiper">
            <div class="swiper-wrapper" ref="wrapper">
              <div class="swiper-slide">
                <div v-for="(carouselItem) in carouselList" :key="carouselItem.id" class="flex-con" :style="scrollItemStyle">
                  <group-component :item="carouselItem" :pageId="pageId" :popId="popId"></group-component>
                </div>
              </div>
            </div>
            <!-- Add Scroll Bar -->
            <div class="swiper-scrollbar" ref="scrollBar"></div>
        </div>
      </div>
      <div v-else class="group-carousel" :style="styles" ref="swiper">
        <div class="swiper swiper-container swiper-container-h" ref="scrollSwiper">
          <div class="swiper-wrapper" ref="wrapper">
            <div class="swiper-slide" :class="{'swiper-no-swiping': isNoSwiping}" v-for="(carouselItem) in carouselList" :key="carouselItem.id">
              <group-component :item="carouselItem" :pageId="pageId" class="wid-hei-inherit"></group-component>
              <!-- <component v-for="(item_, i) in carouselItem.components" :key="item_.id + '_' + i" :id="item_.id" :is="item_.type" :item="item_" :pageId="pageId" :popId="popId"></component> -->
            </div>
          </div>
          <div @click.stop v-if="item.commonAttr.paginationType == PAGINATION_TYPE[1].value" :id="item.id + '-pagination'" class="swiper-pagination" :class="getPaginationClass"></div>
          <template v-else-if="item.commonAttr.paginationType == PAGINATION_TYPE[2].value">
            <div @click.stop :id="item.id + '-prev'" class="swiper-button-prev" :style="getSwiperPreStyle"></div>
            <div @click.stop :id="item.id + '-next'" class="swiper-button-next" :style="getSwiperNextStyle"></div>
          </template>
          <template v-if="item.commonAttr.paginationType == PAGINATION_TYPE[3].value">
            <div @click.stop :id="item.id + '-pagination'" class="swiper-pagination" :class="getPaginationClass"></div>
            <div @click.stop :id="item.id + '-prev'" class="swiper-button-prev" :style="getSwiperPreStyle"></div>
            <div @click.stop :id="item.id + '-next'" class="swiper-button-next" :style="getSwiperNextStyle"></div>
          </template>
        </div>
      </div>
    <!-- </template>
  </inject-template> -->
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'
import { getPxOVwByValue } from '@/store/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { carousel } from "@/components/js/carousel"
import { PAGINATION_TYPE } from '@/common/const'
import { LIST_TYPE_MAP, COMPONENT_TYPES } from '@/const/'
import { defineAsyncComponent, ref } from 'vue'
import { rotate } from '@/components/js/rotate'
import { getCompIdByParam } from '@/plugins/utils'

import '@/assets/css/carousel.scss'

const components = {
  InjectTemplate,
  GroupComponent: defineAsyncComponent(() => import('@/components/group-component.vue')),
}
//1953 上阵 赢下这一声喝彩commonList 1572 牛气大PK scroll 386 国潮主页面 swiper翻页 2030 关联自定义数据
export default {
  name: 'GroupCarousel',
  mixins: [utils, commonUtils, carousel, rotate],
  components,
  setup () {
    return {
      isHiddenComp: ref(true),
      PAGINATION_TYPE: PAGINATION_TYPE,
      LIST_TYPE_MAP: LIST_TYPE_MAP,
      itemList: []
    };
  },
  computed: {
    relateCompItemIndex () {
      const relateAttrCompId = getCompIdByParam(this.commonAttr.relateAttrCompId);
      return this.componentMap[relateAttrCompId].commonAttr.itemIndex;
    },
    carouselList(){
      if(this.isH5Edit) {
        if(this.itemList.length > 0){
          return this.itemList;
        }else{
          _.forEach(this.item.components, (compData, i) => {
            compData.commonAttr.qIndex = i;
          })
          let itemList = this.itemList;
          let copyItem = null;
          let wbListOrLists_ = this.wbListOrLists
          const item = this.item
          const itemIndex = item.commonAttr.itemIndex >= 0 ? _.parseInt(item.commonAttr.itemIndex) : 0
          const listLen = item.commonAttr.listLen >=0 ? _.parseInt(item.commonAttr.listLen): 0
          if(itemIndex > 0) {
            wbListOrLists_ =  wbListOrLists_.slice(itemIndex, wbListOrLists_.length)
          }
          if(listLen > 0) {
            wbListOrLists_ =  wbListOrLists_.slice(itemIndex, itemIndex + listLen)
          }
          _.forEach(wbListOrLists_, (item, index) => {
            copyItem = _.cloneDeep(this.item);
            copyItem.cid = COMPONENT_TYPES.group_component;
            copyItem.conStyles.height = getPxOVwByValue(this.commonAttr.height)
            copyItem.id = this.item.id + "_" + index;
            copyItem.commonAttr.itemIndex = itemIndex + index;
            _.forEach(copyItem.components, (compData, i) => {
              compData.id = compData.id + "_" + index + "_" + i;
              compData.commonAttr.qIndex = i;
              compData.commonAttr.itemIndex = itemIndex + index;

              if(compData.components && compData.components.length > 0) {
                compData.cid = COMPONENT_TYPES.group_component;
                _.forEach(compData.components, (compData_) => {
                  compData_.id = compData_.id + "_" + index + "_" + i;
                  compData_.commonAttr.qIndex = i;
                  compData_.commonAttr.itemIndex = itemIndex + index;
                  // componentMap[compData_.id] = compData_;
                  compData_.isInGroupCarousel = true;
                })
              }
            })
            copyItem.commonAttr.itemIndex = index;
            itemList.push(copyItem);
          });
          return itemList;
        }
      } else {
        return this.item.components
      }
    },
    scrollItemStyle() {
      return {
        height: getPxOVwByValue(this.commonAttr.height),
        width: `calc(100% / ${this.commonAttr.columnNum || 1})`
      }
    }
  },
  mounted(){
    // this.carouselDot()
    // this.$store.commit("updateComponentAttr", { id:this.item.id, conStyles: { height: getPxOVwByValue(this.item.conAttr.height * 4) } })
  },
  methods: {
     scrollItemRelativeStyle(index) {
       return {
        width: `calc(100% / ${this.commonAttr.columnNum || 1})`
      }
     },
    initSwiper(Swiper) {
      if(!Swiper || this.swiper || this.isHtml2canvas){
        return
      }
      const commonAttr = this.commonAttr;
      if(commonAttr.listType == LIST_TYPE_MAP.scroll || commonAttr.listType == LIST_TYPE_MAP.carousel){
        if(commonAttr.listType == LIST_TYPE_MAP.scroll){
          this.swiper_ = new Swiper(this.$refs.scrollSwiper, {
            direction: 'vertical',
            slidesPerView: 'auto',
            freeMode: true,
            scrollbar: {
              el: this.$refs.scrollBar,
            },
            mousewheel: true,
          });
        }else{
          this.initSwiper_(Swiper);
        }
        if(this.swiper && this.swiper.update){
          this.swiper.update();
        }
      }
    },
    initSwiper_(Swiper){
      let swiperDom = this.$refs.swiper
      if(!Swiper || !swiperDom){
        return
      }
      if(this.commonAttr.paginationType == PAGINATION_TYPE[2].value || this.commonAttr.paginationType == PAGINATION_TYPE[3].value){
        let prevEl = document.getElementById(this.item.id + '-prev')
        let nextEl = document.getElementById(this.item.id + '-next')
        let swiperOption = this.swiperOption;
        swiperOption.navigation = {
          prevEl: prevEl,
          nextEl: nextEl,
        };
      }
      let swiperContainer = swiperDom.getElementsByClassName("swiper-container-h")[0];
      if(!swiperContainer){
        swiperContainer = this.$refs.scrollSwiper;
      }
      this.swiper_ = new Swiper(swiperContainer, this.swiperOption);
      this.carouselDot();
    }
  }
};
</script>
<style lang="scss">
.group-carousel-relative {
  width: inherit;
  height: inherit;
  position: relative;

  .flex-con {
    position: relative;
    display: flex;
    flex-direction: column;
  }
}
.group-carousel {
  width: inherit;
  height: inherit;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
  align-items: center;

  .flex-con{
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .swiper-slide{
    position: relative;
  }
  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .vertical-scroll{
    .swiper-slide {
      height: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    .slide-img{
      width: 100%;
      object-fit: contain;
    }
  }

}
</style>
